<template>
<div class="e1">
    <!-- <h1>权限管理</h1> -->
  <div class="role-table-container">
    <!-- 搜索及按钮区域 -->
    <div class="header-bar">
      <div class="search-area">
        <!-- <select class="status-select">
          <option value="all">角色状态</option>
          <option value="enabled">启用中</option>
          <option value="disabled">已停用</option>
        </select> -->
        <input 
          type="text" 
          placeholder="请输入角色名称进行模糊搜索" 
          class="search-input" v-model="input"
        />
        <button class="search-btn" @click="ss()">搜索</button>
      </div>
      <button class="add-btn" @click="tj()">+ 添加系统角色</button>
    </div>

    <!-- 表格区域 -->
    <table class="role-table">
      <thead>
        <tr>
          <th><input type="checkbox" class="select-all" /></th>
          <th>角色名称</th>
          <th>角色描述</th>
          <th>角色权限配置</th>
          <th>角色启用状态</th>
          <th>最后编辑时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in tableData" :key="index">
          <td><input type="checkbox" class="row-select" /></td>
          <td>{{ item.rolename }}</td>
          <td>{{ item.describe }}</td>
          <td>{{ item.powers }}</td>
          <td>{{ item.status == 1 ? '启用' : '停用' }}</td>
          <td>{{ item.lasttime }}</td>
          <td class="operation">
            <button class="edit-btn" @click="xiu(item)">编辑</button>
            <button class="delete-btn" @click="sc(item)">删除</button>
            <button class="delete-btn" @click="gai(item.id)">更改状态</button>
          </td>
        </tr>
      </tbody>
    </table>


    <!-- 分页 -->
    <el-pagination
  @prev-click="shang()"
  background
  layout="prev, pager, next"
  :page-size="10"
  :total="100" class="r1" @next-click="xia()">
 </el-pagination>




    <!-- 删除 -->
    <!-- 遮罩层 -->
  <div class="mask" id="mask"></div>
   <!-- 弹出框内容 -->
  <div class="popup" id="popup">
    <span class="e2">提示</span>
    <span class="e3">删除后，&emsp13; {{ name }}  &emsp13;&emsp13;&emsp13;将不再具备角色相应劝权限</span>
    <button @click="qd()" class="e4">确定</button>
  </div>


  <!-- 添加 -->
 <div class="t" id="t"></div>
   <!-- 弹出框内容 -->
  <div class="t1" id="t1">
    <span class="e7">添加系统角色</span>
   <span class="e6">角色名称 &emsp13;&emsp13;&emsp13;<input type="text" placeholder="请输入1-20个字符" v-model="input1"></span>
   <span class="e8">描述 &emsp13;&emsp13;<textarea v-model="input2"></textarea></span>
   <span class="e9">是否启用 &emsp13;&emsp13;&emsp13;&emsp13;启用<input type="radio" class="u1" v-model="input3" name="ni" :checked="true"> 禁用<input type="radio" class="u1" name="ni"></span>  
   <span class="i2">权限配置</span>
   <div class="i1">
    <span class="i3"><input type="checkbox" class="i7"  v-model="input6">首页</span>
    <span class="i4"><input type="checkbox" class="i7">企业管理</span>
    <span class="i5"><input type="checkbox" class="i7">童话统计</span>
    <span class="i6"><input type="checkbox" class="i7">开放统计</span>
   </div>
    <button @click="qdd()" class="e5">确定</button>
  </div>


  <!-- 修改 -->
   <div class="z" id="z"></div>
   <!-- 弹出框内容 -->
  <div class="z1" id="z1">
     <span class="e7">添加系统角色</span>
   <span class="e6">角色名称 &emsp13;&emsp13;&emsp13;<input type="text" placeholder="请输入1-20个字符" v-model="input10"></span>
   <span class="e8">描述 &emsp13;&emsp13;<textarea v-model="input11"></textarea></span>
   <span class="e9">是否启用 &emsp13;&emsp13;&emsp13;&emsp13;启用<input type="radio" class="u1" name="ni"> 禁用<input type="radio" class="u1" name="ni" v-model="input12"></span>  
   <span class="i2">权限配置</span>
   <div class="p7">
    <span class="p3"><input type="checkbox" class="i7"  v-model="input13">系统角色配置</span>
    <span class="p4"><input type="checkbox" class="i7">系统用户管理</span>
    <span class="p5"><input type="checkbox" class="i7"><div class="p8">呼转计费配置</div></span>
    <span class="p6"><input type="checkbox" class="i7">客户端版本维护啊</span>
   </div>
    <button @click="qddd()" class="e5">确定</button>
  </div>


  </div>
  
</div>

</template>

<script>
import { qvanx ,qvanxdel ,qvanxsol , qvanxgeng , qvanxadd , qvanxpei ,qvanxxiu} from '@/utlis/https';


export default {
//   name: 'RoleTable',
  data() {
    return {
        // 删除
        Id:'',
        name:'',

        // 全部列表
      tableData: [],
      allpage:'',
      pagecount:'',


      // 搜索
      input:"",


      // 添加
      input1:'',
      input2:'',
      input3:0,
      // input4:0,
      // input5:1,
      input6:'首页',


      // 修改
      da:"",
      input10:'',
      input11:'',
      input12:0,
      input13:'系统角色配置',

    }
  },
    mounted() {
      // 权限配置
      qvanxpei()
      .then((val) =>{
        console.log(val);
      })
      .catch((e) =>{
        console.log(e);
      })




    // 渲染
        qvanx()
        .then((val) =>{
            console.log(val);
            this.tableData = val.data.data

            // this.allpage = val.data.allpage //总页数
            // this.pagecount = val.data.pagecount //总条数
        })
        .catch((e) =>{
            console.log(e);
        })
    },

    methods:{


        // 封装
        fn(){
            qvanx()
        .then((val) =>{
            console.log(val);
            this.tableData = val.data.data
        })
        .catch((e) =>{
            console.log(e);
        })
        },


        // 删除
        sc(item){
            console.log(item);
            this.Id = item.id
            this.name = item.rolename
         document.getElementById('mask').style.display = 'block';
         document.getElementById('popup').style.display = 'block';
        },
        qd(){
             qvanxdel(this.Id)
        .then((val) =>{
            console.log(val);
            this.fn()
        document.getElementById('mask').style.display = 'none';
         document.getElementById('popup').style.display = 'none';
        })
        .catch((e) =>{
            console.log(e);
        })
        },



        // 添加
        tj(){
         document.getElementById('t').style.display = 'block';
         document.getElementById('t1').style.display = 'block';
        },
        qdd(){
          // console.log(this.input1,this.input2,this.input3);
          
          qvanxadd({
            rolename:this.input1,
            describe:this.input2,
            status:this.input3,
            powers:this.input6
          })
          .then((val) =>{
            console.log(val);
            this.fn()
            document.getElementById('t').style.display = 'none';
         document.getElementById('t1').style.display = 'none';
          })
          .catch((e) =>{
            console.log(e);
          })
        },



        shang(){
          console.log('上');
        },
        xia(){
          console.log('下');
        },



        // 搜索
        ss(){
            qvanxsol(this.input)
        .then((val) =>{
            console.log(val);
            this.tableData = val.data.data
        })
        .catch((e) =>{
            console.log(e);
        })
        },

        // 更改状态
        gai(id){
          // console.log(id);.

          var a = this.tableData.find(item => item.id == id)
          console.log(a);

          qvanxgeng({
            id:a.id,
            status:a.status
          })
          .then((val) =>{
          if(a.status == 1){
          a.status = 0
          // console.log(a.status);
        }else if(a.status == 0){
          a.status = 1
          // console.log(a.status);
        }
            console.log(val);
          })
          .catch((e) =>{
            console.log(e);
          })
        },

        // 修改
        xiu(item){
          // console.log(item);
          this.da = item.id
          // console.log(this.da);
          
        document.querySelector('.z').style.display = 'block';
         document.querySelector('.z1').style.display = 'block';
        },
        qddd(){
          qvanxxiu(this.da,{
            rolename:this.input10,
            describe:this.input11,
            status:this.input12,
            powers:this.input13
          })
          .then((val) =>{
            console.log(val);
       document.querySelector('.z').style.display = 'none';
         document.querySelector('.z1').style.display = 'none';
          })
          .catch((e) =>{
            console.log(e);
          })
        }
    },
    computed:{
    }
}
</script>

<style lang='less' scoped>
.role-table-container {
  width: 1200px;
//   margin: 20px auto;
  font-family: "Microsoft YaHei", sans-serif;
  position: absolute;
  top: 20px;
  left: 20px;
}

/* 头部搜索及按钮栏 */
.header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.search-area {
  display: flex;
  align-items: center;
}
.status-select {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 8px;
}
.search-input {
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 8px;
  outline: none;
}
.search-btn, .add-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.search-btn {
  background-color: #fff;
  border: 1px solid #ccc;
}
.add-btn {
  background-color: #409eff;
  color: #fff;
}

/* 表格样式 */
.role-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.role-table th,
.role-table td {
  border: 1px solid #ebeef5;
  padding: 10px 8px;
}
.role-table thead {
  background-color: #f8f9fc;
}

/* 状态标签样式 */
.status-tag {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.enabled {
  background-color: #c3e6cb;
  color: #388e3c;
}
.disabled-tag {
  background-color: #f5c6cb;
  color: #dc3545;
}

/* 操作列按钮 */
.operation {
  display: flex;
  gap: 6px;
}
.edit-btn, .delete-btn, .disable-btn, .enable-btn {
  padding: 4px 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.edit-btn {
  background-color: #ffc107;
  color: #fff;
}
.delete-btn {
  background-color: #f44336;
  color: #fff;
}
.disable-btn {
  background-color: #6c757d;
  color: #fff;
}
.enable-btn {
  background-color: #28a745;
  color: #fff;
}

/* 已停用行样式（可选，突出展示） */
.disabled {
  opacity: 0.7;
}
.e1{
    width: 1250px;
    height: 600px;
    background-color: white;
    position: relative;
    top: 20px;
    left: 20px;
    overflow-y: auto; /* 仅垂直方向自动滚动 */
}
td{
    text-align: center;
}
.select-all{
    position: relative;
    left: 15px;
}
    /* 遮罩层样式 */
    .mask {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明，实现周围变黑效果 */
      display: none; /* 默认隐藏 */
      z-index: 998; /* 保证在弹出框下方，又能覆盖页面其他内容 */
    }
    /* 弹出框样式 */
    .popup {
      position: fixed;
      top: 50%;
      left: 40%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      display: none; /* 默认隐藏 */
      z-index: 999; /* 保证在遮罩层上方 */
      width: 400px;
      height: 120px;
      position: relative;
    }
    .e2{
        position: absolute;
        top: 20px;
        left: 20px;
        font-size: 17px;
    }
    .e3{
        position: absolute;
        top: 70px;
        left: 50px;
        font-size: 14px;
    }
    .e4{
        position: absolute;
        top: 120px;
        right: 20px;
        width: 60px;
        height: 30px;
        color: white;
        border: none;
        background-color: rgb(64,158,255);
    }

       /* 遮罩层样式 */
    .t {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明，实现周围变黑效果 */
      display: none; /* 默认隐藏 */
      z-index: 998; /* 保证在弹出框下方，又能覆盖页面其他内容 */
    }
    /* 弹出框样式 */
    .t1 {
      position: fixed;
      top: 50%;
      left: 40%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      display: none; /* 默认隐藏 */
      z-index: 999; /* 保证在遮罩层上方 */
      width: 500px;
      height: 500px;
      position: relative;
    }
    .e5{
       position: absolute;
        top: 480px;
        right: 20px;
        width: 60px;
        height: 30px;
        color: white;
        border: none;
        background-color: rgb(64,158,255);
    }
    .e6{
        position: absolute;
        top: 80px;
        left: 60px;
        font-size: 14px;
        color: rgb(110,126,159);
    }
    .e7{
      position: absolute;
      top: 40px;
      left: 20;
    }
    .e6 input{
      border: 1px solid Rgb(220,223,230);
      width: 220px;
      height: 25px;
    }
    .e8{
      position: absolute;
      top: 130px;
      left: 90px;
      color: rgb(110,126,159);
    }
    .e8 textarea {
      border: 1px solid Rgb(220,223,230);
      width: 300px;
      height: 25px;
      position: absolute;
    }
    .e9{
        position: absolute;
        top: 190px;
        left: 60px;
        font-size: 14px;
        color: rgb(110,126,159);
    }
    .r1{
      position: absolute;
      right: 30px;
      top: 520px;
    }
    .u1{
      position: relative;
      top: 3px;
    }
    .i1{
      width: 300px;
      height: 200px;
      // background-color: aqua;
      position: absolute;
      top: 240px;
      left: 170px;
      border: 1px solid rgb(223,225,232);
    }
    .i2{
      position: absolute;
      top: 240px;
      left: 60px;
       font-size: 14px;
        color: rgb(110,126,159);
    }
    .i3{
      font-size: 13px;
      position: relative;
      left: 30px;
      top: 20px;
    }
    .i4{
      font-size: 13px;
      position: relative;
      right: 16px;
      top: 50px;
    }
    .i5{
      font-size: 13px;
      position: relative;
      right: 88px;
      top: 80px;
    }
     .i6{
      font-size: 13px;
      position: relative;
      top: 110px;
      right: 160px;
    }
    .i7{
      position: relative;
      top: 3px;
    }
           /* 遮罩层样式 */
    .z {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明，实现周围变黑效果 */
      display: none; /* 默认隐藏 */
      z-index: 998; /* 保证在弹出框下方，又能覆盖页面其他内容 */
    }
    /* 弹出框样式 */
    .z1 {
      position: fixed;
      top: 50%;
      left: 40%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      display: none; /* 默认隐藏 */
      z-index: 999; /* 保证在遮罩层上方 */
      width: 500px;
      height: 500px;
      position: relative;
    }
    .p3{
      position: relative;
      left: 50px;
      top: 20px;
    }
    .p4{
      position: relative;
      right: 65px;
      top: 50px;
    }
    .p5{
      position: relative;
      right: 180px;
      top: 80px;
    }
    .p7{
      width: 300px;
      height: 200px;
      // background-color: aqua;
      position: absolute;
      top: 240px;
      left: 170px;
      border: 1px solid rgb(223,225,232);
    }
    .p8{
      position: relative;
      left: 255px;
      bottom: 20px;
    }
    .p6{
      position: relative;
      top: 70px;
      left: 53px;
    }
</style>